<template>
	<div id="search">
		<div>
			<i class="fa fa-search"></i>
			<input type="text" v-model="keyword" />
		</div>
		<div>
			<h3>电影/电视剧/综艺</h3>
		</div>
		<ul>
			<li>
				<div>
					<img :src="/images/001.png" alt="">
				</div>
				<div class="dian">
					<p>机械师2</p>
					<p>剧情，喜剧，犯罪</p>
					<p>2020-6-30</p>
				</div>
				<div>8.9</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				keyword: "",
				newsearch: []

			}
		},
		methods: {
			getsearchData() {
				var that = this;
				axios.get('/mock/newsearch.json')
					.then(function(response) {
						console.log(response);
						if (response.status == 200) {
							if (response.data && response.data.newsearch) {
								that.newsearch = response.data.newsearch;
							}
						}
					})
					.catch(function(error) {
						console.log(error);
					});
			}
		},
		created() {
			this.getsearchData();
		},
		computed: {
			"newse"() {
				if (this.keyword == "") {
					return this.newsearch;
				} else {
					return this.newsearch.filter(item => {
						return !item.title.indexOf(this.keyword)
					})
				}
			}
		}


	}
</script>

<style scoped>
	#search>div {
		background: #f5f5f5;
		padding: 10px;
	}
	#search>div div{
		background: white;
		border-radius: 5px;
		border: 1px solid #ccc;
		padding: 5px;
	}
	input{
		border: none;
		outline: none;
	}
	h3{
		color: #999;
		border-bottom: 1px solid #ccc;
		padding: 5px;
		font-size: 18px;
	}
	li div{
		float: left;
	}
	img{
		width: 80px;
	}
	li{
		overflow: hidden;
		padding: 10px;
		border: 1px dashed #ccc;
	}
	.dian{
		margin-left: 10px;
	}
	li div:last-child{
		color: #FF7F50;
		float: right;
	}
	li div:first-child{
		font-size: 14px;
	}

	
</style>
